<template>
	<view class="home">
		<custom-navbar :title="title" :show-back="true" @back="handleBack" />

		<view class="content" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 加载状态 -->
			<view class="loading-state" v-if="isLoading">
				<!-- <u-loading mode="circle" color="#4A90E2"></u-loading> -->
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 错误状态 -->
			<view class="error-state" v-if="isError && !isLoading">
				<image src="/static/images/error.svg" class="error-img" mode="widthFix"></image>
				<text class="error-text">{{ errorMsg }}</text>
				<button class="retry-btn" @click="fetchAgreementData">重试</button>
			</view>

			<!-- 内容区域 -->
			<view class="agreement-content p30" v-if="!isLoading && !isError">
				<mp-html :content="agreementContent" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		agreement
	} from '@/api/user'

	// 获取全局实例
	const {
		proxy
	} = getCurrentInstance()
	const cdn = (path) => proxy.$cdn + path

	// 系统信息与导航栏高度
	const systemInfo = uni.getSystemInfoSync()
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)

	// 响应式数据
	const isLoading = ref(true) // 加载状态
	const isError = ref(false) // 错误状态
	const errorMsg = ref('') // 错误信息
	const agreementContent = ref('') // 协议内容
	const title = ref('隐私协议') // 页面标题

	// 接口参数
	const langCode = ref('zh') // 语言编码：zh中文, em英文, ja日语, ko韩文
	const agreementType = ref(2) // 协议类型：1用户协议, 2隐私协议

	// 页面加载时获取参数并请求数据
	onLoad((options) => {
		// 从路由参数获取类型（可选，默认2=隐私协议）
		if (options.type) {
			agreementType.value = Number(options.type)
			title.value = agreementType.value === 1 ? '用户协议' : '隐私协议'
		}

		// 从路由参数获取语言（可选，默认zh中文）
		if (options.lang) {
			const validLangs = ['zh', 'em', 'ja', 'ko']
			if (validLangs.includes(options.lang)) {
				langCode.value = options.lang
			}
		}

		// 请求协议数据
		fetchAgreementData()
	})

	// 获取协议数据
	const fetchAgreementData = async () => {
		try {
			isLoading.value = true
			isError.value = false
			errorMsg.value = ''

			// 调用接口，传递必要参数
			const res = await agreement({
				lang_code: langCode.value,
				type: agreementType.value.toString() // 确保类型为字符串
			})

			// 处理接口响应
			if (res.code === 200 && res.data?.content) {
				agreementContent.value = res.data.content
			} else {
				throw new Error(res.message || '获取协议内容失败')
			}
		} catch (error) {
			isError.value = true
			errorMsg.value = error.message || '加载失败，请重试'
			console.error('协议数据请求失败:', error)
		} finally {
			isLoading.value = false
		}
	}

	// 返回上一页
	const handleBack = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		background-color: #ffffff;
		overflow: hidden;

		.content {
			width: 100%;
			min-height: 100vh;
			box-sizing: border-box;
		}

		// 加载状态样式
		.loading-state {
			width: 100%;
			height: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.loading-text {
				font-size: 28rpx;
				color: #999;
				margin-top: 20rpx;
			}
		}

		// 错误状态样式
		.error-state {
			width: 100%;
			padding: 100rpx 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;

			.error-img {
				width: 160rpx;
				margin-bottom: 40rpx;
			}

			.error-text {
				font-size: 28rpx;
				color: #ff5252;
				margin-bottom: 40rpx;
				text-align: center;
			}

			.retry-btn {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #4A90E2;
				color: #fff;
				border-radius: 40rpx;
				font-size: 28rpx;
				border: none;
			}
		}

		// 协议内容样式
		.agreement-content {
			min-height: calc(100vh - var(--status-bar-height) - 44px);
			font-size: 28rpx;
			line-height: 2; // 增加行高，提高可读性

			// 对mp-html渲染的内容进行样式优化
			:deep(p) {
				margin-bottom: 30rpx;
				color: #333;
			}

			:deep(h1),
			:deep(h2),
			:deep(h3) {
				font-weight: bold;
				margin: 40rpx 0 20rpx;
				color: #222;
			}

			:deep(ul),
			:deep(ol) {
				margin: 20rpx 0 20rpx 40rpx;
			}

			:deep(li) {
				margin-bottom: 15rpx;
				color: #333;
			}
		}
	}
</style>